/* 轮播图特效 
   日期 2021.03.19
   姓名 小胡工程师 
*/ 

(function () {
    // 得到元素
    var carousel_list = document.getElementById('carousel_list');
    var left_btn = document.getElementById('left_btn');
    var right_btn = document.getElementById('right_btn');
    var Circle_ol = document.getElementById('circle_ol');
    var Circles_lis = Circle_ol.getElementsByTagName('li');
    var banner = document.getElementById('banner');
    // 克隆第一张li
    var clone_li = carousel_list.firstElementChild.cloneNode(true);
    // 上树
    carousel_list.appendChild(clone_li);
    // 当前正在显示的图片序号，从0开始
    var idx = 0;
    // 节流锁
    var lock = true;
    // 右按钮事件监听
    right_btn.onclick = right_btn_handler;
    // 右按钮的事件处理函数
    function right_btn_handler () {
        // 判断节流锁的状态，如果是关闭的，那么就什么都不做
        if (!lock) return;
        // 关锁
        lock = false;
        // 加上过渡
        carousel_list.style.transition = 'transform .5s ease 0s';
        idx++;
        // 拉动
        carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';
        // 判断是否是最后一张 如果是就瞬移到第一张
        if (idx > 4) {
            setTimeout(function() {
                // 去掉过渡
                carousel_list.style.transition = 'none';
                // 删除tranform属性
                carousel_list.style.transform = 'none';
                // 全局图片序号变为0
                idx = 0;
            }, 500);
        }
        // 设置小圆点
        setCircles();

        // 开锁
        setTimeout(function () {
            lock = true;
        }, 500);
    }
    // 左按钮事件监听
    left_btn.onclick = function () {
        // 判断节流锁的状态，如果是关闭的，那么就什么都不做
        if (!lock) return;
        // 关锁
        lock = false;
        // 左按钮 先写if语句，而不是idx--
        if (idx == 0) {
            // 瞬间拉动到最后
            carousel_list.style.transition = 'none';
            // 拉到最后（瞬间移动）
            carousel_list.style.transform = 'translateX(' + -16.66 * 5 + '%)';
            // 改变idx的值
            idx = 4;
            // 小技巧 利用延时0毫秒 防止样式覆盖
            setTimeout(function() {
                // 加上过渡
                carousel_list.style.transition = 'transform .5s ease 0s';
                // 动画
                carousel_list.style.transform = 'translateX(' + -16.66 * 4 + '%)';
            }, 0);
        } else {
            idx --;
            // 拉动
            carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';
        }
        // 设置小圆点
        setCircles();
        // 开锁
        setTimeout(function () {
            lock = true;
        }, 500);
    }

    // 设置小圆点的current在谁身上 序号为idx的小圆点才有current类名，其他的li都没有类名
    function setCircles() {
        // 遍历 0，1，2，3，4。
        for(var i =0; i<=4; i++) {
            // 这里%5的目的就是为了右按钮它有一瞬间，idx会成为5，500毫秒之后才变为0。
            if (i == idx % 5) {
                Circles_lis[i].className = 'current';
            } else {
                Circles_lis[i].className = '';
            }
        }
    }
    // 事件委托，小圆点的监听
    Circle_ol.onclick = function (e) {
        if (e.target.tagName.toLowerCase() == 'li') {
            // 得到li身上的data-n属性，就是n
            var n = Number(e.target.getAttribute('data-n'));
            // 改变idx
            idx=n;
            // 拉动
            carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';
            // 设置小圆点
            setCircles();
        }
    }
    // 定时器 自动轮播
    var timer = setInterval(right_btn_handler, 2000);
    //鼠标进入，自动轮播暂停
    banner.onmouseenter = function () {
        clearInterval(timer);
    }
    //鼠标离开，自动轮播开始
    banner.onmouseleave = function () {
        // 设表先关
        clearInterval(timer);
        // 设置定时器，这里不要加var 加var就变成局部变量clear不掉了
        timer = setInterval(right_btn_handler, 2000);
    }
})();